<template>
  <div class="new_account_information">
    <div class="user_info_div">
      <div class="user_avatar">
        <img :src="imgUrl" alt="" />
      </div>
      <div class="user_info">
        <p class="user_name">{{ userInfo.userName }}</p>
        <p class="user_department_name">{{ departmentName }}</p>
      </div>
    </div>
    <div class="task_title">
      <span class="task_line"></span>
      <span class="task_title_word">任务管理</span>
      <span class="task_line"></span>
    </div>
    <div class="other_info" v-if="isHome">
      <div>
        <p
          class="number"
          @click="toList('needMy')"
          :style="{ color: color[0] }"
        >
          {{ toBeReviewed ? toBeReviewed : "0" }}
        </p>
        <p class="title">待我审核</p>
      </div>
      <div>
        <p
          class="number"
          @click="toList('myApplying')"
          :style="{ color: color[1] }"
        >
          {{ myApplyingNumber ? myApplyingNumber : "0" }}
        </p>
        <p class="title">我发起的</p>
      </div>
      <div>
        <p class="number" @click="toList('CCme')" :style="{ color: color[2] }">
          {{ flowDone ? flowDone : "0" }}
        </p>
        <p class="title">已办事宜</p>
      </div>
      <!-- <div>
            <p class="number" :style="{color: color[3]}">0</p>
            <p class="title">已办事宜</p>
        </div> -->
    </div>
  </div>
</template>

<script>
import { getFlowBeforeList, getFlowLaunch } from "./api";
import { getFlowTodoCount } from "@/api/home";
export default {
  props: {
    isHome: { default: true },
  },
  data() {
    return {
      userInfo: {},
      timeState: "",
      departmentName: "",
      color: ["#7A4CFE", "#2ACBA9", "#FF7B3D", "#3C86FF"],
      CCmeNumber: 0,
      myApplyingNumber: 0,
      url: "",
      imgUrl: "",
      toBeReviewed: 0,
      flowDone: 0,
    };
  },
  created() {
    this.url = window.location.origin + window.location.pathname;
    this.userInfo = this.$store.getters.userInfo;
    if (this.userInfo.headIcon.substring(0, 4) == "/api") {
      this.imgUrl =
        // window.location.origin +
        this.define.comUrl + this.userInfo.headIcon;
    } else {
      this.imgUrl =
        // window.location.origin +
        this.define.comUrl +
        "api/file/Image/userAvatar/" +
        this.userInfo.headIcon;
    }
    console.log(this.userInfo);
    this.timeState = this.getTimeState();
    this.departmentName = this.getDepartmentName();
    this.getData();
    this.getNumber();
  },
  methods: {
    getData() {
      getFlowTodoCount().then((res) => {
        this.entrust = res.data.entrust || 0;
        this.flowDone = res.data.flowDone || 0;
        this.toBeReviewed = res.data.toBeReviewed || 0;
      });
    },
    getTimeState() {
      let date = new Date();
      let hours = date.getHours();
      let state = "";
      if (hours >= 0 && hours <= 10) {
        state = "早上好!";
      } else if (hours > 10 && hours <= 14) {
        state = "中午好!";
      } else if (hours > 14 && hours <= 18) {
        state = "下午好!";
      } else if (hours > 18 && hours <= 24) {
        state = "晚上好!";
      }
      return state;
    },
    getDepartmentName() {
      let departmentArr =
        this.$store.getters.userInfo.departmentName.split("/");
      console.log(departmentArr, "++++++");
      let departmentName =
        departmentArr[0] + "  |  " + departmentArr[departmentArr.length - 1];
      return departmentName;
    },
    getNumber() {
      // getFlowBeforeList({
      //   currentPage: 1,
      //   pageSize: 1,
      // }).then((res) => {
      //   this.CCmeNumber = res.data.pagination.total;
      // });
      getFlowLaunch({
        currentPage: 1,
        pageSize: 1,
        status: 1,
      }).then((res) => {
        this.myApplyingNumber = res.data.pagination.total;
      });
    },
    toList(type) {
      if (type == "needMy") {
        this.$router.push({
          path: "/workFlow/flowTodo",
        });
      }
      if (type == "myApplying") {
        this.$router.push({
          path: "/workFlow/flowLaunch",
        });
      } else if (type == "CCme") {
        this.$router.push({
          path: "/workFlow/flowDone",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.new_account_information {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  padding: 28px 20px 20px;
  // background-color: #fff;
  background: linear-gradient(180deg, #f1f6fe 0%, #fff 100%);
  // background-image: url("../../../assets/images/user-back.png");
  background-repeat: no-repeat;
  background-size: 100%;
  .user_info_div {
    overflow: hidden;
    text-align: center;
  }
  .user_avatar {
    text-align: left;
    display: inline-block;
    // float: left;
    img {
      width: 55px;
      height: 55px;
      border-radius: 55px;
    }
  }
  .user_info {
    display: inline-block;
    // float: left;
    font-family: "PingFangSC";
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: left;
    margin-top: 16px;
    position: relative;
    top: -9px;
    left: 15px;
    .user_name {
      font-size: 16px;
      color: #030303;
    }
    .user_department_name {
      font-size: 14px;
      color: #606266;
    }
  }
  .task_title {
    margin-top: 25px;
    text-align: center;
    span {
      color: rgba(0, 0, 0, 0.8);
      font-size: 16px;
    }
    .task_title_word {
      display: inline-block;
      padding: 0 15px;
      font-family: "Microsoft YaHei, Microsoft YaHei";
    }
    .task_line {
      display: inline-block;
      width: calc(50% - 50px);
      height: 6px;
      position: relative;
      top: -2px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
  }
  .other_info {
    margin-top: 25px;
    display: flex;
    font-family: "PingFangSC";
    justify-content: space-between;
    div {
      cursor: pointer;
      text-align: center;
      .title {
        font-size: 14px;
        color: #666666;
        margin-top: 5px;
      }
      .number {
        font-size: 20px;
      }
    }
  }
}
</style>
